<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Minechat</title>
    <link rel="stylesheet" href="css/font-awesome.min.css"/>
    <link rel="stylesheet" href="css/main.css"/>
    <link rel="stylesheet" href="css/transition.css"/>
</head>
<body class="bg f14 c_51">
<div class="m w800"><h2 class="green"><i class="fa fa-comment"></i> Minechat <span class="f12 c_ccc">By Harrie</span>
</h2></div>
<div id="app" class="m w800 bg_fbfbfb pane pr">
    <div v-if="step==0" class="tc"><i class="fa fa-refresh fa-spin"></i> 正在连接服务器，如长时间未响应，请刷新页面（F5）。</div>
    <login-box v-if="step==1" transition="expand"></login-box>
    <create-room-box v-if="step==2" transition="expand"></create-room-box>
    <chat-box v-if="step==3" transition="expand"></chat-box>
</div>
<div class="tc"><a class="highlight" target="_blank" href="http://git.oschina.net/varharrie/Minechat">从Git@OSC获取源码</a>
</div>
</body>
<script type="text/template" id="loginBoxTemplate">
    <div id="loginBox">
        <p class="tc">请输入你的昵称：</p>
        <input type="text" class="m w600 h30 block" v-model="$parent.userName"/>

        <div class="w600 m mt10 mb10 f16">
            <div class="btn btn-basic mb5" v-for="room in $parent.rooms" v-on:click="doLoginCheck(room.id)">
                <div class="btn-left">{{room.name}}[{{room.count}}]</div>
                <div class="btn-right"><i class="fa fa-chevron-circle-right"></i></div>
            </div>
            <div class="btn btn-basic" v-on:click="toCreateRoom">
                <div class="btn-left">创建房间</div>
                <div class="btn-right"><i class="fa fa-plus-circle"></i></div>
            </div>
        </div>
    </div>
</script>
<script type="text/template" id="createRoomBoxTemplate">
    <div id="createRoomBox">
        <p class="tc">请输入房间名称：</p>
        <input type="text" class="m w600 h30 block" v-model="roomName"/>

        <div class="w600 m mt10 mb10 f16">
            <div class="btn btn-basic mb5" v-on:click="doCreateRoomCheck">
                <div class="btn-left">创建</div>
                <div class="btn-right"><i class="fa fa-arrow-circle-right"></i></div>
            </div>
            <div class="btn btn-basic" v-on:click="createRoomCancel">
                <div class="btn-left">取消</div>
                <div class="btn-right"><i class="fa fa-arrow-circle-left"></i></div>
            </div>
        </div>
    </div>
</script>
<script type="text/template" id="chatBoxTemplate">
    <div id="chatBox">
        <div id="userBox">
            <div class="pane itemPane bg_fbfbfb pa" style="width: 200px;left: -210px;top:0;">
                <div class="header"><i class="fa fa-user"></i> [{{$parent.users.length}}] {{$parent.roomName}}</div>
                <ul>
                    <li v-for="user in $parent.users">
                        <a class="item" v-on:click="quoteUser(user.name)"><i class="fa fa-at c_ccc"></i>
                            {{user.name}}</a>
                    </li>
                </ul>
            </div>
        </div>
        <div id="msgBox" style="height: 400px;overflow-y: scroll;border: solid 1px #e1e1e1;">
            <ul>
                <li v-for="item in $parent.msgList" transition="show">
                    <div v-if="item.type=='message'" v-bind:class="['msgItem',item.self ? 'fr':'fl']">
                        <div class="header">{{item.name}}</div>
                        <div class="content">{{{item.msg}}}</div>
                        <div class="footer">{{item.date.format('yyyy-MM-dd hh:mm:ss')}}</div>
                    </div>
                    <div v-else class="infoItem">
                        [{{item.date.format('hh:mm:ss')}}]{{item.msg}}
                    </div>
                </li>
            </ul>
        </div>
        <div class="clearfix"></div>
        <hr class="mt10 mb10"/>
        <textarea v-model="postMsg" v-on:keydown.enter="onPost($event)" v-on:paste="doPostImg" id="postMsgText"
                  class="w" rows="4" placeholder="说点什么...{{$parent.allowPostImg?'贴个图片...':''}}"></textarea>

        <div class="mt5 pr">
            <div class="faceWrapper" v-if="$parent.allowPostImg" v-show="faceSelVisible[0]" transition="slide">
                <div class="item" v-for="n in 110" v-on:click="faceSelect(0,'emoji',n+1)"><img
                        src="./content/face/emoji/{{n+1}}.png"/></div>
            </div>
            <div class="faceWrapper" v-if="$parent.allowPostImg" v-show="faceSelVisible[1]" transition="slide">
                <div class="item" v-for="n in 69" v-on:click="faceSelect(1,'tuzki',n+1)"><img
                        src="./content/face/tuzki/{{n+1}}.gif"/></div>
            </div>
            <button v-on:click="doLogout" class="btn btn-error fl mr10"><i class="fa fa-sign-out"></i>
                {{$parent.userName}}（注销）
            </button>
            <button class="btn btn-basic fl mr10" v-if="$parent.allowPostImg" v-on:click="faceSelToggle(0)"><i
                    class="fa fa-smile-o"></i> Emoji
            </button>
            <button class="btn btn-basic fl mr10" v-if="$parent.allowPostImg" v-on:click="faceSelToggle(1)"><i
                    class="fa fa-smile-o"></i> Tuzki
            </button>
            <label v-if="$parent.allowPostImg" for="imgSel" class="btn btn-basic fl">
                <i class="fa fa-picture-o"></i> 图片
                <input id="imgSel" type="file" class="none" v-on:change="openImgSel($event)"/>
            </label>
            <button v-on:click="doPost" class="btn btn-success fr ml10"><i class="fa fa-send-o"></i> 发送（Shift+Enter）
            </button>
            <button v-on:click="clearMsg" class="btn fr"><i class="fa fa-trash-o"></i> 清空记录</button>
        </div>
    </div>
</script>
<script src="/socket.io/socket.io.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/minechat.js"></script>
</html>